<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品优购(PYG.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--    网站描述-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<!--    关键字-->
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <link rel="icon" href="favicon.ico">
<!--    初始化样式文件-->
    <link rel="stylesheet" href="css/base.css">
<!--    公共样式-->
    <link rel="stylesheet" href="css/common.css">
<!--    不同样式-->
    <link rel="stylesheet" href="css/index.css">
<!--    引入缓动动画JS-->
    <script src="js/animate.js"></script>
<!--    引入js-->
    <script src="js/index.js"></script>
</head>
<body>
<!--快捷导航模块-->
<section class="shortcut">
    <div class="w">
        <div class="left">
            <ul>
                <li>品优购欢迎您&nbsp;&nbsp;&nbsp;</li>
                <li><a href="#">请登录 </a>&nbsp
                    <a href="#" class="style_red">免费注册
                    </a></li>
            </ul>
        </div>

        <div class="right">
            <ul>
                <li><a href="#">我的订单</a></li>
                <li><a class="arrow_down-icon" href="#">我的品优购</a></li>
                <li><a href="#">品优购会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a class="arrow_down-icon" href="#">关注品优购</a></li>
                <li><a class="arrow_down-icon" href="#">客服服务</a></li>
                <li><a class="arrow_down-icon" href="#">网站导航</a></li>
            </ul>
        </div>

    </div>
</section>
<!--头部-->
<header class="w">
    <div class="logo">
        <h1><a href="#" title="品优购">品优购</a></h1>
    </div>
    <div class="searchBox">
        <label for="search"></label><input type="search" id="search" placeholder="web前端"><button>搜索</button>
    </div>
    <div class="hot_words">
        <a href="#" class="style_red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购 </a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <a class="cart right arrow_right-icon">
        我的购物车
    <i class="count">8</i>
    </a>
</header>
<!--商品分类-->
<div class="goods_nav">
    <div class="w">
        <div class="dropdown left ">
            <div class="dt">全部商品分类</div>
            <aside class="aside">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机、数码、通信</a></li>
                    <li><a href="#">电脑、办公</a></li>
                    <li><a href="#">家居、家具、家装、厨具</a></li>
                    <li><a href="#">男装、女装、童装、内衣</a></li>
                    <li><a href="#">个户化妆、清洁用品、宠物</a></li>
                    <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
                    <li><a href="#">运动户外、钟表</a></li>
                    <li><a href="#">汽车、汽车用品</a></li>
                    <li><a href="#">母婴、玩具乐器</a></li>
                    <li><a href="#">食品、酒类、生鲜、特产</a></li>
                    <li><a href="#">医药保健</a></li>
                    <li><a href="#">图书、音像、电子书</a></li>
                    <li><a href="#">彩票、旅行、充值、票务</a></li>
                    <li><a href="#">理财、众筹、白条、保险</a></li>
                </ul>
            </aside>
        </div>

        <ul class="nav_items left">
            <li><a href="#">服装城</a></li>
            <li><a href="#">美妆馆</a></li>
            <li><a href="#">传智超市</a></li>
            <li><a href="#">全球购</a></li>
            <li><a href="#">闪购</a></li>
            <li><a href="#">团购</a></li>
            <li><a href="#">拍卖</a></li>
            <li><a href="#">有趣</a></li>
        </ul>
    </div>
</div>
<div class="main clearfix">
    <div class="w">

        <div class="banner left">
            <!--左侧箭头-->
            <a href="javascript:" class="left_arrow">&lt;</a>
            <!--右侧箭头-->
            <a href="javascript:" class="right_arrow">&gt;</a>
            <ul>
<!--                <li><a href="#"><img src="upload/focus4.png" alt=""></a></li>-->
                <li><a href="#"><img src="upload/focus1.png" alt=""></a></li>
                <li><a href="#"><img src="upload/focus2.png" alt=""></a></li>
                <li><a href="#"><img src="upload/focus3.png" alt=""></a></li>
                <li><a href="#"><img src="upload/focus4.png" alt=""></a></li>
<!--                <li><a href="#"><img src="upload/focus1.png" alt=""></a></li>-->
            </ul>
            <ol>
            </ol>
        </div>
        <div class="newsBox left">
            <div class="news_title">
                <h3 class="left">品优购快报</h3>
                <a class="arrow_right-icon left">更多</a>
            </div>
            <ul class="news_middle">
                <li><a href="#"><b>[特惠]</b>备战开学季 全民半价购数码！点击加载更多</a></li>
                <li><a href="#"><b>[公告]</b>品优购稳站家电网购六成份额</a></li>
                <li><a href="#"><b>[特惠]</b>百元中秋全品类礼券限量领</a></li>
                <li><a href="#"><b>[公告]</b>上品优生鲜 享澄阳湖大闸蟹</a></li>
                <li><a href="#"><b>[特惠]</b>每日享折扣品优品质游</a></li>
            </ul>
            <div class="life_serve">
               <ul>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>
                   <li><a href="#"><img src="images/iphone.png" alt=""><p>话费</p></a></li>


               </ul>
            </div>
            <div class="bargain"><img src="upload/bargain.png" alt=""></div>
        </div>

    </div>
</div>
<div class="w recommend">
    <div class="today"><span class="iconfont">&#xe64c;</span><p>今日推荐</p></div>
    <ul>
        <li><a href="#"><img src="upload/recom1.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom1.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom1.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom1.png" alt=""></a></li>
    </ul>

</div>
<!--电梯模块-->
<div class="elevator w">
<!--    家用电器-->
    <div class="appliance">
        <div class="hd">
            <h3 class="style_red left">家用电器</h3>
            <ul class="ele_nav">
                <li><a href="#" class="style_red">热门</a></li>
                <li><a href="#">大家电 </a></li>
                <li><a href="#">生活电器</a></li>
                <li><a href="#">厨房电器</a></li>
                <li><a href="#">个护健康</a></li>
                <li><a href="#">应季电器 </a></li>
                <li><a href="#">空气/净水</a></li>
                <li><a href="#">新奇特</a></li>
                <li><a href="#">高端电器</a></li>
            </ul>
        </div>
        <div class="bd">
            <div class="tab_content">
                <div class="tab_list_item">
                    <div>
                        <ul>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">节能补贴</a></li>
                        </ul>
                        <a href="#"></a>
                        <a href="#"><img src="upload/appliance_1.png" alt=""></a>
                    </div>
                    <div> <img src="upload/appliance_3.png" alt=""></div>
                    <div><img src="upload/appliance_3.png" alt=""></div>
                    <div><img src="upload/appliance_3.png" alt=""></div>
                    <div><img src="upload/appliance_3.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="w">

        <ul class="service">
                <li><h5></h5> <div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li>
                <li><h5></h5> <div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li>
                <li><h5></h5> <div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li>
                <li><h5></h5> <div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li>
            </ul>
        <div class="help">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#"><img src="upload/wx.png" alt=""></a></dd>
                
                <dd><a href="#">品优购客户端</a></dd>
            </dl>
        </div>
        <div class="copyrightBox">
           <div class="link">
               <a href="#">关于我们</a>|
               <a href="#">联系我们</a>|
               <a href="#">联系客服</a>|
               <a href="#">商家入驻</a>|
               <a href="#">营销中心</a>|
               <a href="#">手机品优购</a>|
               <a href="#">友情链接</a>|
               <a href="#">销售联盟</a>|
               <a href="#">品优购社区</a>|
               <a href="#">品优购公益</a>|
               <a href="#">English Site</a>|
               <a href="#">Contact U</a>
           </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</div>
</body>
</html>